<template>
    <div v-auto-resize ref="chartEl" class="chart-wrap" />
</template>

<script>
import echarts from 'echarts'
import EchartsBase from '@/mixins/echarts-base'
import AutoResize from '@/directive/echart-resizer'

let oChart
export default {
  name: 'ChartSaleRatio',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  mixins: [EchartsBase],
  directives: {
    AutoResize
  },
  data () {
    return {}
  },
  watch: {
    data () {
      this.$nextTick().then(() => {
        oChart = echarts.init(this.$refs.chartEl)
        this.setOption(this.data)
      })
    }
  },
  methods: {
    setOption (list = []) {
      const color = '#d3d5da'
      const axisBasic = {
        splitLine: {
          show: true,
          lineStyle: {
            color: color,
            type: 'dashed'
          }
        },
        axisTick: {
          show: false
        }
      }
      const yAxisBasic = {
        ...axisBasic,
        axisLine: {
          lineStyle: {
            color: color
          }
        }
      }
      const seriseData = [
        {
          data: [],
          type: 'line',
          label: {
            show: true,
            textBorderColor: '#fff',
            position: 'top',
            formatter: '{c}%'
          }
        }
      ]
      const xAxisData = []
      // eslint-disable-next-line camelcase
      for (const { year_month, chain_relative_ratio } of list) {
        // eslint-disable-next-line camelcase
        xAxisData.push(year_month)
        seriseData[0].data.push(chain_relative_ratio.replace(/%$/, ''))
      }
      const option = {
        title: {
          text: `智能销售环比`,
          left: 'center'
        },
        color: ['#47A2FF ', '#53C8D1', '#59CB74', '#FBD444', '#7F6AAD', '#585247'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['智能销量', '非智能销量', '智能产品占比'],
          bottom: '4%'
        },
        xAxis: [
          {
            ...axisBasic,
            type: 'category',
            axisLine: {
              lineStyle: {
                color: 'black'
              }
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            ...yAxisBasic,
            type: 'value',
            axisLabel: {
              color: '#333',
              formatter: '{value} %'
            }
          }
        ],
        series: seriseData
      }
      oChart.setOption(option)
    }
  }
}
</script>
